<template>
  <div class="container">
    <!-- 顶部导航信息栏 -->
    <TopBar></TopBar>
    <div class="header-box">
      <div class="box1">
        <div class="title">{{taskData.name}}</div>
        <div class="money">{{taskData.payment}}元/{{taskData.unit}}</div>
        <div class="money-discuss" v-show="taskData.isPaymentNegotiable==='true'">可议</div>
      </div>
      <div class="tag-box">
        <div class="tag" v-for="(item) in taskData.tags" :key="item.id">{{ item }}</div>
      </div>
      <div class="box2">
        <img class="person-avatar" :src="taskData.avatarUrl" alt="">
        <div class="person-name">{{taskData.senderNameShow}}</div>
        <img class="decorate1" src="../assets/images/address2.png" alt="">
        <div class="person-city">{{taskData.region}}</div>
        <img class="decorate2" src="../assets/images/deadlineImg.png" alt="">
        <div class="deadline">{{ formatDate(taskData.deadline) }}</div>
      </div>
      <!-- 按钮 -->
      <button @click="handleFavorite(taskData)" class="favorite">
        <img :src="taskData.isFavorited ? require('@/assets/images/favorite-icon2.png') : require('@/assets/images/favorite-icon.png')" alt="favorite">
        {{ taskData.isFavorited ? '已收藏' : '收藏' }}
      </button>
      <button class="chat">聊一聊</button>
    </div>


    <div class="content-box">
      <!-- 需求描述 -->
      <div class="describe-title" v-show="taskData.description !== ''">需求描述</div>
      <div class="describe-content" v-show="taskData.description !== ''">{{ taskData.description }}</div>
      <!-- 图片 -->
      <div class="image-box">
        <div
            v-for="(image, index) in taskData.imgUrls"
            :key="index"
            class="images"
            v-show="taskData.imgUrls[0] !== ''"
        >
          <img :src="image" class="image-item" alt="预览图片">
        </div>
      </div>

      <!-- 文件 -->
      <div class="file-box" v-show="taskData.attachmentUrl !==''">
        <img class="img1" src="@/assets/images/taskdetailfile.png" alt="">
        <div class="file-link">{{ taskData.attachmentName }}</div>
        <a :href="taskData.attachmentUrl">
          <img class="img2" src="@/assets/images/fileDownloadImg.png" alt="">
        </a>
      </div>



    </div>



    <!-- 底部导航信息栏 -->
    <BottomBar class="bottom-container"></BottomBar>

  </div>
</template>

<script>
import TopBar from "@/components/TopBar.vue";
import BottomBar from "@/components/BottomBar.vue";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";


export default {
  name: "SchoolZonePage",  // 确保组件名一致
  components: {
    BottomBar,
    TopBar
  },
  setup() {
    const route = useRoute(); // 引入 Vue Router 实例
    const taskData = ref({}); // 存储任务详情数据

    onMounted(() => {
      const task = route.query.task ? JSON.parse(route.query.task) : null;
      if (task) {
        taskData.value = task; // 将获取到的任务数据赋值给 taskData
      }
      console.log('Task details:', task);
    });

    /*const taskData = ref({
      name: "社交媒体内容协助发布",
      payment:"50元",
      unit:"天",
      isPaymentNegotiable:"true",
      deadline:"2024-12-11",
      region:"浙江-杭州",
      description:"岗位职责：\n" +
          "本岗位工作内容由两部分组成：\n" +
          "一、负责年轻人潮玩+交友活动策划及主持\n" +
          "1.独立完成每周青年潮玩+交友活动策划及主持工作；(包括但不限于：咖啡交友、露营、轰趴、聚餐、K歌、DIY等活动)\n" +
          "2.寻找适合举办交友活动的场地；\n" +
      "4. 因旅游行业的特殊性，周末及法定节日（除春节外）均有需求；\n" +
          "本岗位工作内容由两部分组成：\n" +
          "一、负责年轻人潮玩+交友活动策划及主持\n" +
          "1.独立完成每周青年潮玩+交友活动策划及主持工作；(包括但不限于：咖啡交友、露营、轰趴、聚餐、K歌、DIY等活动)\n" +
          "2.寻找适合举办交友活动的场地；\n" +
          "5. 对年轻人群体喜好趋势有敏锐的观察",
      tags:['文案撰写','图像编辑'],
      imgUrls:
          [
            'https://img.js.design/assets/smartFill/img354164da74c4b8.jpg',
            'https://img.js.design/assets/smartFill/img362164da74c4b8.jpg',
            'https://img.js.design/assets/smartFill/img348164da74c4b8.jpeg'
          ],
      attachmentUrl:"111",
      isGroup:"",
      peopleNumber:"",
      personName:"罗小昔",
      personAvatar:"https://img.js.design/assets/img/671e031b4bb2e8ffc099b965.jpg#256cc8663039fbfe7f326b3d682f1c66",
      isFavorited:false
    });*/
    // 收藏功能
    const handleFavorite = (task) => {
      task.isFavorited = !task.isFavorited;
    };
    const formatDate = (dateString) => {
      if(dateString === null ){
        return "无"
      }
      const date = new Date(dateString); // 转换为 Date 对象
      const year = date.getFullYear(); // 获取年份
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，注意月份从 0 开始，+1 修正
      const day = String(date.getDate()).padStart(2, '0'); // 获取日期
      return `${year}-${month}-${day}`; // 返回格式化后的日期
    };


    return {
      taskData,
      handleFavorite,
      formatDate
    };
  },
};
</script>

<style scoped>
.container {
  position: absolute;
  width: 100%;
  min-height: 100vh;
  height: fit-content;
  top: 0;
  left: 0;
  overflow-x: hidden; /* 禁止横向滚动条 */
  overflow-y: hidden;
  background: rgba(242, 244, 245, 1);
  display: flex;
  flex-direction: column;
}
.header-box{
  position: relative;
  margin-top: 6.48vh;
  width: 100vw;
  height: 16.574vh;
  background: rgba(255, 255, 255, 1);
  padding: 0 10.9375vw;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}
.header-box .box1{
  display: flex;
  flex-direction: row;
  margin-top: 2.963vh;
  height: 2.6vh;
  white-space: nowrap;
  width: fit-content;
}
.title{
  position: relative;
  line-height: 2.6vh;
  font-size: 0.9375vw;
  font-weight: 550;
  border-radius: 0.833vw;
  margin-right: 1.875vw;
}
.money{
  position: relative;
  font-size: 0.9375vw;
  font-weight: 500;
  color: rgba(238, 113, 62, 1);
  vertical-align: middle;
  margin-right: 1.25vw;
  line-height: 2.6vh;
}
.money-discuss{
  position: relative;
  width: 4.5vh;
  height: 1.9vh;
  top: 0.3vh;
  line-height: 1.9vh;
  border-radius: 4vw;
  border: 0.00521vw solid rgba(238, 113, 62, 1);
  font-size: 0.625vw;
  color: rgba(238, 113, 62, 1);
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
}
.tag-box{
  position: relative;
  margin-top: 2.22vh;
  width: 20.885vw;
  height: 2.037vh;
  display: flex;
  align-items: center;
  gap: 0 0.833vw;
}
.tag{
  width: 4.383vw;
  height: 2.037vh;
  border-radius: 6.5625vw;
  background: rgba(255, 255, 255, 1);
  border: 0.0621vw solid rgba(153, 153, 153, 1);
  font-size: 0.625vw;
  line-height: 2.037vh;
  color: rgba(102, 102, 102, 1);
}
.header-box .box2{
  position: relative;
  display: flex;
  flex-direction: row;
  margin-top: 2.22vh;
  height: 2.6vh;
  white-space: nowrap;
  width: fit-content;
  align-items: center;
}
.person-avatar{
  position: relative;
  width: 2.6vh;
  height: 2.6vh;
  border-radius: 50%;
  margin-right: 0.573vw;
}
.person-name{
  line-height: 2.6vh;
  font-size: 0.729vw;
  font-weight: 400;
  color: rgba(32, 32, 32, 1);
  margin-right: 2.97vw;
}
.decorate1{
  margin-right: 0.15625vw;
  height: 1.48vh;
}
.person-city{
  font-size: 0.625vw;
  color: rgba(102, 102, 102, 1);
  margin-right: 1.875vw;
}
.decorate2{
  width: 0.83vw;
  margin-right: 0.417vw;
}
.deadline{
  font-size: 0.625vw;
  color: rgba(102, 102, 102, 1);
}
.favorite {
  position: absolute;
  right: 18.845vw;
  top: 6.48vh;
  width: 6.25vw;
  height: 3.704vh;
  padding-left: 1.07vw;
  border-radius: 5.21vw;
  border: 0.10417vw solid rgba(13, 127, 233, 1);
  font-size: 0.833vw;
  font-weight: 600;
  color: rgba(13, 127, 233, 1);
  background: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.favorite img{
  margin-right: 0.5vw;
  width: 1.9vh;
  height: 1.9vh;
}
.chat {
  position: absolute;
  right: 10.9375vw;
  top: 6.48vh;
  width: 6.25vw;
  height: 3.704vh;
  border-radius: 5.21vw;
  font-size: 0.833vw;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  border: none;
  background: linear-gradient(90deg, rgba(14, 127, 232, 1) 0%, rgba(0, 95, 204, 1) 100%);
}

.content-box{
  position: relative;
  margin-left: 10.9375vw;
  margin-top: 4.06vh;
  width: 78.125vw;
  min-height: 68.5vh;
  height: fit-content;
  border-radius: 0.833vw;
  box-shadow: 0 0 0.521vw rgba(51, 51, 51, 0.15);
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-bottom: 5.926vh;
  padding: 2.22vh 1.667vw;
  box-sizing: border-box;
}
.content-box::-webkit-scrollbar {
  display: none;
}
.describe-title{
  font-size: 0.9375vw;
  font-weight: 550;
  color: rgba(32, 32, 32, 1);
}
.describe-content{
  margin-top: 2.22vh;
  height: fit-content;
  font-size: 0.833vw;
  line-height: 2.77vh;
  white-space: pre-wrap;
}
.image-box{
  width: fit-content;
  height: 16.67vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  margin-top: 3.33vh;
  gap: 0 2.083vw;
}
.images {
  width: 12.5vw;
  height: 16.67vh;
  border-radius: 0.833vw;
  overflow: hidden;
  position: relative;
  display: block;
  background-color: #2c3e50;
}
.image-item {
  width: 12.5vw;
  height: 16.67vh;
  object-fit: cover;
  border: none;
}
.file-box{
  position: relative;
  width: 23.4375vw;
  height: 8.3vh;
  border-radius: 0.833vw;
  background: rgba(235, 245, 255, 1);
  margin-top: 3.33vh;
  margin-bottom: 1.2vh;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.file-box .img1{
  margin-left: 1.25vw;
  width: 3.71vh;
  height: 3.71vh;
}
.file-box a{
  position: absolute;
  right: 1.4vw;
  width: 3vh;
  height: 3vh;
}
.file-box .img2{
  position: absolute;
  width: 3vh;
  height: 3vh;
}
.file-box .file-link{
  margin-left: 0.9375vw;
  font-size: 0.833vw;
  color: rgba(32, 32, 32, 1);
}

.bottom-container{
  position: relative;
}
</style>
